<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>首页</title>
	<link rel="stylesheet" href="plugins/bootstrap4/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugins/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="plugins/marked/marked.js"></script>
</head>

<body>

	<!-- 头部-导航 -->
	<div class="cl-header container-fluid mb-3">
		<div class="header-content container px-0">

			<nav class="navbar navbar-expand-lg navbar-light">
				<a class="navbar-brand" href="#"><img src="images/wechat_logo.png" height="70"
						class="rounded-circle"></a>
				<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
					data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>


				<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="index.html">首页</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
								aria-haspopup="true" aria-expanded="false">分类</a>
							<div class="dropdown-menu nav_border" aria-labelledby="dropdownId">
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">前端</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">后端</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">数据库</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">工具</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">微信开发</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">服务器</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">职场感悟</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item bg-transparent text-dark" href="archive.html">其他</a>
							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="pigeonhole.html">归档</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="photo.html">相册</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="video.html">视频</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="about.html">关于我</a>
						</li>
					</ul>
					<form class="form-inline my-2 my-lg-0">
						<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
						<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
					</form>

				</div>
			</nav>


		</div>
	</div>
	<!-- 头部-导航 -->


	<!-- 主体 -->
	<div class="cl-cantainer container">
		<div class="row">
			<!-- 左侧 -->
			<div class="col-md-9 left">
				<div class="container recommend-index mb-3">

					<div class="recommend-top">
						<div id="carouselExampleIndicators" class="carousel slide mb-3" data-ride="carousel">
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
								<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							</ol>
							<div class="carousel-inner">
								<div class="carousel-item active">
									<img class="d-block w-100" src="images/15.jpg" alt="First slide">
								</div>
								<div class="carousel-item">
									<img class="d-block w-100" src="images/13.jpg" alt="Second slide">
								</div>
								<div class="carousel-item">
									<img class="d-block w-100" src="images/12.jpg" alt="Third slide">
								</div>
							</div>
							<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
								data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
								data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>

					<div class="recommend-bottom">
						<div class="row">
							<div class="col">
								<a href="javascript:"><img src="images/16.jpg" class="img-fluid float-left" alt=""></a>
							</div>
							<div class="col">
								<a href="javascript:"><img src="images/21.jpg" class="img-fluid float-right" alt=""></a>
							</div>
						</div>
					</div>

				</div>

				<div class="container card-index mb-3">

					<div class="card border-light mb-3 p-3">
						<div class="row">
							<div class="col-lg-3 col-md-4 col-sm-12 mb-3">
								<a href="content.html">
									<img src="images/d197f62611ff69b738e114add9f3183b.jpg"
										class="img-thumbnail" alt=""></a>
							</div>

							<div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
								<h3 class="mb-2"><a href="content.html">博客的时代正在到来</a></h3>
								<div class="cl-card-main-info mb-2">
									<p>全世界每天传播的媒体内容，有一半是由6大媒体巨头所控制。其利益驱动、意识形态以及传统的审查制度，使得这些经过严重加工处理的内容已经越来越不适应人们的需求。
									</p>
								</div>

								<div class="cl-card-more"><a href="content.html">查看详情...</a><span
										class="float-right text-secondary">2019-08-09 14:27:25 | 阅读数 9</span></div>
							</div>
						</div>
					</div>

					<div class="card border-light mb-3 p-3">
						<div class="row">
							<div class="col-lg-3 col-md-4 col-sm-12 mb-3">
								<a href="content.html">
									<img src="images/cb259c4ecb78d4d3295eac6f20d7d707.jpg"
										class="img-thumbnail" alt=""></a>
							</div>

							<div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
								<h3 class="mb-2"><a href="content.html">博客的时代正在到来</a></h3>
								<div class="cl-card-main-info mb-2">
									<p>全世界每天传播的媒体内容，有一半是由6大媒体巨头所控制。其利益驱动、意识形态以及传统的审查制度，使得这些经过严重加工处理的内容已经越来越不适应人们的需求。
									</p>
								</div>

								<div class="cl-card-more"><a href="content.html">查看详情...</a><span
										class="float-right text-secondary">2019-08-09 14:27:25 | 阅读数 9</span></div>
							</div>
						</div>
					</div>


				</div>

				<nav aria-label="Page navigation example" class="mb-3">
					<ul class="pagination justify-content-center">
						<li class="page-item disabled">
							<a class="page-link" href="#" tabindex="-1">Previous</a>
						</li>
						<li class="page-item"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
						<li class="page-item"><a class="page-link" href="#">3</a></li>
						<li class="page-item">
							<a class="page-link" href="#">Next</a>
						</li>
					</ul>
				</nav>


			</div>
			<!-- 右侧 -->
			<div class="col-md-3 right">
				<div class="card border-light mb-3">
					<div class="card-body">
						<h4 class="card-title text-left">请喝咖啡</h4>
						<img src="images/wechat_pay.png" class="img-fluid mb-3 rounded mx-auto d-block" alt="">
						<p class="card-text text-center text-muted">感谢博主，喝杯咖啡~</p>
					</div>
				</div>

				<div class="card border-light mb-3">
					<div class="card-body">
						<h4 class="card-title text-left">请吃糖</h4>
						<img src="images/ali_pay.jpg" class="img-fluid mb-3 rounded mx-auto d-block" alt="">
						<p class="card-text text-center text-muted">感谢博主，喝吃糖~</p>
					</div>
				</div>

				<div class="card border-light mb-3">
					<div class="card-body pb-0">
						<h4 class="card-title text-left">我的标签</h4>
					</div>
					<div class="card-body pt-0">
						<a href="http://" class="badge badge-primary ml-2">php</a>
						<a href="http://" class="badge badge-secondary ml-2">工具</a>
						<a href="http://" class="badge badge-success ml-2">数据库</a>
						<a href="http://" class="badge badge-danger ml-2">前端插件</a>
						<a href="http://" class="badge badge-warning ml-2">Git</a>
						<a href="http://" class="badge badge-info ml-2">服务器</a>
						<a href="http://" class="badge badge-light ml-2">微信公众号</a>
						<a href="http://" class="badge badge-dark ml-2">微信小程序</a>
					</div>
				</div>

				<div class="card border-light mb-3">
					<a href="http://"><img src="images/8ecb9a5f6b18bf662327c5dc5ed0fdc0.jpg" class="img-fluid" alt=""></a>
				</div>

				<div class="card border-light mb-3">
					<div class="card-body pb-0">
						<h4 class="card-title text-left">最新文章</h4>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio</a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio</a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio</a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio</a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio</a></li>
					</ul>
				</div>


				<div class="card border-light mb-3">
					<a href="http://"><img src="images/a6bc4c1258894bf0829aef7b2da76017.png" class="img-fluid" alt=""></a>
				</div>

				<div class="card border-light mb-3">
					<div class="card-body pb-0">
						<h4 class="card-title text-left">热门文章</h4>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio<span
									class="badge badge-pill badge-danger ml-2">9</span></a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio<span
									class="badge badge-pill badge-danger ml-2">2</span></a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio<span
									class="badge badge-pill badge-danger ml-2">1119</span></a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio<span
									class="badge badge-pill badge-danger ml-2">9444</span></a></li>
						<li class="list-group-item border-0"><i class="fa fa-angle-right fa-fw"
								aria-hidden="true"></i><a href="http://">Cras justo odio<span
									class="badge badge-pill badge-danger ml-2">119</span></a></li>
					</ul>
				</div>


			</div>
		</div>
	</div>
	<!-- 主体 -->



	<!-- 尾部-网站信息 -->
	<div class="container-fluid cl-footer">
		<div class="container">
			<small class="text-muted">Copyright @ 2017~2019 Theme design by jeanstudio</small>
		</div>
	</div>
	<!-- 尾部-网站信息 -->

	<!-- 功能栏 -->
	<div class="floatbar" id="updown">
		<a href="index.html"><i class="fa fa-home"></i></a>
		<a href="#post" class="up"><i class="fa fa-arrow-up"></i></a>
	</div>
	<!-- 功能栏 -->

	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="plugins/bootstrap4/js/bootstrap.min.js"></script>

	<script>
		$(function () {
			$('#updown .up').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });
		}); 
	</script>

</body>

</html>